import React,{PureComponent} from 'react';
import {SlideshowDiv} from '../style';
import {connect} from 'react-redux';
import { Carousel,Icon } from 'antd';
import {goto} from '../store/actionCreators';
  class Slideshow extends PureComponent {

      handleNext = ()=>{                  //下一页
          this.refs.homeLbt.next();
      }
      handlePrev = ()=>{                //上一页
          this.refs.homeLbt.prev();
      }

    render(){

        return(

              <SlideshowDiv>
                  {this.props.images.size>0?<div> <div className='lbtButton left' onClick={this.handlePrev}><Icon type="left" style={{ fontSize: '4vw',color:'white',background:'rgba(0,0,0,0.2)',width:'5vw',padding:'0.5vw 0vw',borderRadius:'50%',paddingRight:'5px'}}/>  </div>
                      <Carousel autoplay ref='homeLbt'>
                          {this.props.images.map(image => <img src={image.get('filePath')} className="lbt" alt="" key={image.get('filePath')} />)}
                      </Carousel>
                      <div className='lbtButton right' onClick={this.handleNext}><Icon type="right"  style={{ fontSize: '4vw',color:'white',background:'rgba(0,0,0,0.2)',width:'5vw',padding:'0.5vw 0vw',borderRadius:'50%',paddingLeft:'5px'}}/>   </div>
                  </div>:null}
                      </SlideshowDiv>
        )

    }
      componentDidMount(){//初始化
         this.props.getImg();
      }
}
const mapState=(state)=>({
    images: state.getIn(['home','images'])
})
const mapDispatch=(dispatch)=>({
    getImg(){
        dispatch(goto());
    }
});
export  default connect(mapState,mapDispatch)(Slideshow);